<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电长申请</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #app {

            width: 100vw;
            height: 2595px;
            /* font-size: 0.6rem; */
            margin: 0;
            padding: 0;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            /* background-position: 0 0 / cover; */
            overflow-y: auto;
            background-image: url('https://dc.zygyx.com/miniapp/baoming.png');
            /* background-color: #101129; */
        }

        .el-dialog__header {
            padding: 0;
        }

        .title {
            text-align: center;
            font-size: 4vw;
            font-weight: 700;
            /* color: brown; */
            color: transparent;
            background-image: linear-gradient(to bottom, rgb(173, 0, 0), red);
            -webkit-background-clip: text;
            background-clip: text;
            margin-top: 3vw;
        }

        .label {
            /* color: #333; */
            font-size: 4vw;
            font-weight: 700;
            margin: 5vw 0 4vw;
        }

        .baoming {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 5vw;
            font-weight: 700;
            margin: 7vw;
        }

        .baoming span:last-child {
            color: #f50;
        }

        .input_box {
            width: 100%;
            height: 10vw;
            border: 1px solid rgb(255, 102, 25);
            border-radius: 10px;
            padding: 0 20px;
            font-size: 4vw;
            box-sizing: border-box;
        }

        .el-input__inner {
            border: 1px solid rgb(255, 102, 25);
            border-radius: 8px;
        }

        .fuli {
            padding: 16px;
            background: #ffe9e0;
            border-radius: 10px;
            height: 180px;
        }

        p {
            color: #ff1c0e;
            font-family: PingFang SC;
            font-size: 15px;
            font-weight: 500;
            margin-top: 12px;
        }

        .baofu {
            background: #ff5f10;
            font-size: 17px;
            font-weight: 700;
            height: 30px;
            line-height: 28px;
            display: inline-block;
            padding: 0 10px;
            border-radius: 15px;
            color: aliceblue;
            margin-bottom: 15px;
        }

        .submit {
            width: 100%;
            height: 11vw;

            line-height: 11vw;
            text-align: center;
            font-size: 4vw;
            color: #fff;
            background: linear-gradient(90deg, #f50, #ff2424);
            margin: 7vw 0 0;
            border-radius: 10PX;
        }

        .el-dialog__body {

            position: relative;
            padding: 2vw 5vw;
            background-image: linear-gradient(to bottom,
                    red -21%,
                    white 12%);
        }

        .el-dialog {
            border-radius: 16px;
            /* 你可以根据需要调整这个数值 */
        }

        /* 如果你想要更精细的控制，可以单独设置头部和主体的圆角 */
        .el-dialog__header {
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }

        .el-dialog__body {
            border-top-right-radius: 16px;
            border-top-left-radius: 16px;
            border-bottom-left-radius: 16px;
            border-bottom-right-radius: 16px;
        }

        .submittips {
            width: 100%;
            position: fixed;
            /* left: 50%; */
            bottom: 0px;
            /* height: 43px; */
            /* transform: translate(-50%, 0); */
            border-radius: 22px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            /* background-position: 0 0 / cover; */
            overflow-y: auto;
            background-image: url('https://dc.zygyx.com/miniapp/tijiao.png');
        }

        .el-dialog__close {
            display: none;
        }

        /* .submittips:active {
            background-color: #fdc50e;
        } */
        .msel {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            background-color: transparent;
        }
    </style>
</head>

<body>
    <div id="app" :style="{height:`${windowHeight}px`}" v-loading="loading" element-loading-text="加载中,请稍后"
        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-dialog :visible.sync="dialogVisible" width="80%" v-loading="loading" show-close="false" :close-on-click-modal="false">
            <div class="msel">
                <div style="width:100%;display:flex;justify-content:flex-end;margin-bottom:10px">
                    <span style="font-size: 4vw;color:#ddc4be " @click="guanbi">x</span>
                </div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm">
                    <el-form-item label="手机号" prop="mobile">
                        <el-input v-model="ruleForm.mobile" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="省份" prop="provinceId">
                        <el-select v-model="ruleForm.provinceId" placeholder="请选择省份" @change="changeSelectCity">
                            <el-option v-for="item in cityData" :key="item.id" :label="item.name"
                                :value="item.id">{{item.name}}</el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')" size="mini">提交</el-button>
                    </el-form-item>
                </el-form>
                <!-- <div class="title">电长申请</div>
                <div class="label">请输入手机号</div>
                <input v-model="call" placeholder="请输入手机号" class="input_box"></input>
                <div class="label" v-if="!token">请选择省份</div>
                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select> -->
                <!-- <div class="baoming">
                    <span>报名费用：</span>
                    <span>￥398</span>
                </div> -->
                <!-- <div class="submit" @click="submitApi">
                        确定申请
                    </div> -->
                <!-- <div class="fuli">
                    <div class="baofu">
                        报名福利
                    </div>
                    <p>·赠送价值108的推文助手季卡会员</p>
                    <p>·赠送价值980元的推文出单课程</p>
                    <p>·官方团队终身答疑陪跑</p>
                    <p>.专厘老师一对一服务</p>
    
                </div> -->
            </div>
        </el-dialog>
        <div v-if="zhuce" class="submittips" @click="submittips" :style="{height:`${submitHeight}px`}">
        </div>
    </div>


    <script>
        new Vue({
            el: '#app', // 指定Vue实例控制的DOM元素
            data: { // 定义数据对象
                cityData: [],
                ruleForm: {
                    // mobile: '',
                    // provinceId: '',
                    // tenantCode: '',
                },
                rules: {
                    mobile: [
                        { required: true, message: '请输入手机号', trigger: 'change' },
                        { min: 1, max: 11, message: '输入有效的手机号', trigger: 'change' }
                    ],
                    provinceId: [
                        { required: true, message: '请选择省份', trigger: 'change' }
                    ]
                },
                value: '',
                windowWidth: window.innerWidth,
                windowHeight: 0,
                // modelHeight: 0,
                submitHeight: 0,
                dialogVisible: false,
                loading: false,
                baseUrl: 'https://v2.zygyx.com/renren-api',//基础路径
                token: '',
                zhenZhangTips: '',
                zhuce: true,
                dialogVisible: false,
                tenantCode: null,//租户
                appid: '',//人人售电appid
                openId: '',
                pid: '',
            },
            mounted() {
                this.getTreeCity()
                const urlString = window.location.search;
                this.token = this.getUrlParameter(urlString, 'token');
                this.tenantCode = this.getUrlParameter(urlString, 'tenantCode');
                this.ruleForm.appid = this.getUrlParameter(urlString, 'appid');
                this.ruleForm.openId = this.getUrlParameter(urlString, 'openId');
                this.ruleForm.pid = this.getUrlParameter(urlString, 'pid');
                if (this.token) {
                    this.zhuce = false
                    this.getDianZhang()
                } else {
                    this.zhuce = true
                    this.dialogVisible = true
                }
                window.addEventListener('resize', this.onResize);
                setTimeout(() => {
                    this.windowWidth = window.innerWidth;
                    this.windowHeight = window.innerWidth * 4336 / 750
                    this.modelHeight = window.innerWidth * 259 / 423
                    this.submitHeight = window.innerWidth * 176 / 750
                }, 200)
            },
            beforeDestroy() {
                window.removeEventListener('resize', this.onResize);
            },
            methods: {
                // 获取省份
                getTreeCity() {
                    let that = this
                    $.ajax({
                        url: `${that.baseUrl}/areaRegion/getAllCityTenantCode`,
                        type: 'GET',
                        headers: {
                            'content-type': 'application/json',
                            'tenantCode': 1002
                        },
                        contentType: 'application/x-www-form-urlencoded', // 可选，确保发送的content-type与headers一致
                        processData: false, // 可选，防止jQuery尝试处理发送的数据
                        success: function (res) {

                            if (res.msg == 'success') {
                                that.cityData = res.data
                            } else {
                                alert(JSON.stringify(res))
                            }

                        },
                        error: function (error) {

                        }
                    });
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.submitApi()
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                },
                // 获取token的方法
                getUrlParameter(url, param) {
                    // 改进的正则表达式，能够处理没有值的参数以及参数可能多次出现的情况
                    const regex = new RegExp(`[?&]${param}(?:=([^&#]*))?`);
                    const results = regex.exec(url);
                    // 检查匹配结果
                    if (results === null) {
                        return null;
                    }
                    // 解码并返回匹配到的参数值
                    return decodeURIComponent(results[1].replace(/\+/g, ' ') || '');
                },
                // 判断是否已经注册过电长
                getDianZhang() {
                    let that = this
                    that.loading = true
                    $.ajax({
                        url: `${that.baseUrl}/towner/checkIsTowner`,
                        type: 'GET',
                        headers: {
                            'content-type': 'application/json',
                            'token': that.token,
                            'tenantCode': that.tenantCode
                        },
                        contentType: 'application/x-www-form-urlencoded', // 可选，确保发送的content-type与headers一致
                        processData: false, // 可选，防止jQuery尝试处理发送的数据
                        success: function (res) {
                               that.loading = false
      
                            if(res.code == 10020 || res.code == 10021) {
                                // 说明用户还没注册
                                that.dialogVisible = true
                                that.zhuce = true
                                // alert(JSON.stringify(res))
                            } else {
                                                            if (res.msg == 'success') {
                                if (res.data.status == '1') {
                                    let i = `${res.data.townerName ? `${res.data.townerName}的` : ''}`
                                    that.zhenZhangTips = `你已是${res.data.townerName}电长，无需重复申请`
                                    that.$message({
                                        showClose: false,
                                        message: `${that.zhenZhangTips}`,
                                        type: 'success',
                                        duration: 0
                                    });
                                } else if (res.data.status == '2') {
                                    that.zhenZhangTips = `你已申请${res.data.townerName}的电长，正在审核中，请耐心等待...`
                                    that.$message({
                                        showClose: false,
                                        message: `${that.zhenZhangTips}`,
                                        type: 'success',
                                        duration: 0
                                    });
                                } else if (res.data.status == '3') {
                                    that.dialogVisible = true
                                    that.zhuce = true
                                }
                            } 
                            }
                        },
                        error: function (error) {
                            that.loading = false
                            that.$message({
                                showClose: true,
                                message: `${error}`,
                                type: 'success',
                                duration: 0
                            });
                            

                        }
                    });
                },
                onResize() {
                    this.windowWidth = window.innerWidth;
                    this.windowHeight = window.innerWidth * 4336 / 750
                    this.modelHeight = window.innerWidth * 259 / 423
                    this.submitHeight = window.innerWidth * 176 / 750
                },
                submittips() {
                    this.dialogVisible = true
                },
                guanbi() {
                    this.dialogVisible = false
                },
                // 获取省列表里面的租户
                changeSelectCity(e) {
                    this.cityData.forEach(element => {
                        if (e == element.id) {
                            this.ruleForm.tenantCode = element.tenantCode
                            console.log(this.ruleForm.tenantCode, 'eeeeeeeeee');

                        }
                    });
                },
                // 自动登录
                submitApi() {
                    if (this.ruleForm.mobile == '') {
                        return this.$message.error('手机号不能为空');
                    } else {
                        // 正则来规范用户输入的手机号
                        let reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
                        if (reg.test(this.ruleForm.mobile) == false) {
                            return this.$message.error('手机号格式不正确，请重新输入');;
                        }
                    }

                    let that = this
                    that.loading = true
                    $.ajax({
                        url: `${that.baseUrl}/api/login`,
                        type: 'POST',
                        data: JSON.stringify(that.ruleForm),
                        headers: {
                            'content-type': 'application/json',
                            'token': '',
                            'tenantCode': that.ruleForm.tenantCode
                        },
                        contentType: 'application/json', // 可选，确保发送的content-type与headers一致
                        processData: false, // 可选，防止jQuery尝试处理发送的数据
                        success: function (response) {
                            if (response.msg == 'success') {
                                that.loading = false
           
                                wx.miniProgram.navigateTo({
                                    url: `/pages/functionCore/townMayorMap/townMayorMap?islogoData=${JSON.stringify(response)}`
                                });
                                that.ruleForm = {}
                            }
                        },
                        error: function (error) {
                            console.log('Error:', error);
                            that.loading = false


                        }
                    });

                }

            },
        });
    </script>
</body>

</html>